<%- include('header', { tabCls: 'toutiao' }); %>
<ul class="list">
  <li class="rank-title">
    <span class="select">
      <a class="<%= day === 7 ? 'active': '' %>" href="toutiao-7.html">7天</a>
      <a class="<%= day === 30 ? 'active': '' %>" href="toutiao-30.html">30天</a>
      <a class="<%= day === 90 ? 'active': '' %>" href="toutiao-90.html">90天</a>
    </span>
  </li>
  <% data.forEach(function(repo, idx){ %>
  <li>
    <div class="avatar">
      <a href="https://toutiao.io<%=repo.homeUrl%>" target="_blank">
        <img src="<%=repo.avatar%>" loading="lazy" title="<%=repo.avatarAlt%>" alt="<%=repo.avatarAlt%>" />
      </a>
    </div>
    <div class="info">
      <div class="rank">
        <span title="Ranking <%=idx + 1%>"><%=idx + 1%></span>
        <a href="https://toutiao.io<%=repo.url%>" target="_blank" title="<%=repo.title%>"><%=repo.title%></a>
      </div>
    
      <div class="details">
        <%=repo.description%>
      </div>
    </div>
    <div class="followers" title="followers">
      <svg width="12" height="12" viewBox="0 0 16 16">
        <g fill="none" fill-rule="evenodd">
          <path d="M0 0h16v16H0z"/>
          <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
        </g>
      </svg><span><%=repo.votes%></span>
    </div>
  </li>
  <% }); %>
</ul>
<%- include('footer', { }); %>
